<template>
  <axiom-card class="axiom-feature-card">
    <!-- 脉冲效果元素 -->
    <div class="axiom-feature-card__pulse"></div>
    
    <!-- 顶部固定区域 -->
    <div class="axiom-feature-card__top">
      <!-- 左上角：标签或状态 -->
      <div class="axiom-feature-card__top-left">
        <slot name="top-left"></slot>
      </div>
      
      <!-- 中上：图标区域 -->
      <div class="axiom-feature-card__top-center">
        <div class="axiom-feature-card__icon">
          <AxiomIcon :name="icon" />
        </div>
      </div>
      
      <!-- 右上角：操作按钮 -->
      <div class="axiom-feature-card__top-right">
        <slot name="top-right"></slot>
      </div>
    </div>
    
    <!-- 中间内容区域 -->
    <div class="axiom-feature-card__content">
      <!-- 标题区域 -->
      <div class="axiom-feature-card__title-area">
        <axiom-title 
          :title="title" 
          :level="titleLevel" 
          type="component"
          class="axiom-feature-card__title"
        />
      </div>
      
      <!-- 描述区域 -->
      <div class="axiom-feature-card__description-area">
        <axiom-text 
          tag="p" 
          type="secondary" 
          class="axiom-feature-card__description"
        >
          {{ description }}
        </axiom-text>
      </div>
      
      <!-- 扩展内容插槽 -->
      <div class="axiom-feature-card__extra-content">
        <slot name="content"></slot>
      </div>
    </div>
    
    <!-- 底部固定区域 -->
    <div class="axiom-feature-card__bottom">
      <!-- 左下角：额外信息 -->
      <div class="axiom-feature-card__bottom-left">
        <slot name="bottom-left"></slot>
      </div>
      
      <!-- 中下：主要操作 -->
      <div class="axiom-feature-card__bottom-center">
        <slot name="bottom-center"></slot>
      </div>
      
      <!-- 右下角：次要操作 -->
      <div class="axiom-feature-card__bottom-right">
        <slot name="bottom-right"></slot>
      </div>
    </div>
  </axiom-card>
</template>

<script setup>
import AxiomCard from './AxiomCard.vue';
import AxiomTitle from './AxiomTitle.vue';
import AxiomText from './AxiomText.vue';
import AxiomIcon from './AxiomIcon.vue';

defineProps({
  icon: {
    type: String,
    required: true
  },
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    required: true
  },
  titleLevel: {
    type: [Number, String],
    default: 3
  }
});
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-feature-card';
</style>